<template>
  <div class="project-card">
    <div class="project-card__image">
      <img :src="project.image" :alt="project.title" />
      <div class="project-card__overlay">
        <div class="project-card__links">
          <a
            v-if="project.demoUrl"
            :href="project.demoUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="project-card__link"
            title="查看演示"
          >
            <ElIcon :size="24"><View /></ElIcon>
          </a>
          <a
            v-if="project.githubUrl"
            :href="project.githubUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="project-card__link"
            title="查看代码"
          >
            <ElIcon :size="24"><Position /></ElIcon>
          </a>
          <RouterLink
            :to="`/projects/${project.id}`"
            class="project-card__link"
            title="查看详情"
          >
            <ElIcon :size="24"><InfoFilled /></ElIcon>
          </RouterLink>
        </div>
      </div>
    </div>
    
    <div class="project-card__content">
      <h3 class="project-card__title">{{ project.title }}</h3>
      <p class="project-card__description">{{ project.description }}</p>
      
      <div class="project-card__tags">
        <ElTag
          v-for="tag in project.tags"
          :key="tag"
          size="small"
          effect="plain"
        >
          {{ tag }}
        </ElTag>
      </div>
    </div>
  </div>
</template>

<script setup>
import { View, Position, InfoFilled } from '@element-plus/icons-vue'

defineProps({
  project: {
    type: Object,
    required: true
  }
})
</script>

<style lang="scss" scoped>
.project-card {
  @include card;
  padding: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  &__image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      @include transition(transform);
    }
  }
  
  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba($primary-color, 0.9);
    @include flex-center;
    opacity: 0;
    @include transition(opacity);
  }
  
  &:hover {
    .project-card__image img {
      transform: scale(1.1);
    }
    
    .project-card__overlay {
      opacity: 1;
    }
  }
  
  &__links {
    display: flex;
    gap: $spacing-md;
  }
  
  &__link {
    @include flex-center;
    width: 48px;
    height: 48px;
    border-radius: $radius-full;
    background: white;
    color: $primary-color;
    @include transition(all);
    
    &:hover {
      transform: scale(1.1);
      box-shadow: var(--shadow-lg);
    }
  }
  
  &__content {
    padding: $spacing-lg;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  &__title {
    font-size: $font-size-xl;
    margin-bottom: $spacing-sm;
    color: var(--text-primary);
  }
  
  &__description {
    color: var(--text-secondary);
    margin-bottom: $spacing-md;
    flex: 1;
    @include text-ellipsis(3);
  }
  
  &__tags {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-sm;
  }
}
</style>

